<template>
	<view>
		<view class="card">
			<image src="../../../../static/images/jbankcard.png" style="width: 100%;height: 100%;border-radius: 10px;" @click="deladd()"></image>
		</view>
		<view class="cardbtn">
			<view class="cardbtn_db" v-if="check">
				<view class="carddb_top">
					<button style="background-color: #EEEEEE;font-size: 12px;width: 140px;height: 23px;margin-top: 2px;line-height: 23px;" @click="firstadd()">初次添加银行卡</button>
				</view>
				<view class="carddb_bottom">
					<button style="background-color: #EEEEEE;font-size: 12px;width: 140px;height: 23px;margin-top: 2px;line-height: 23px;" @click="secondadd()">二次添加银行卡</button>
				</view>
			</view>
			<button style="width: 96%;margin-left: 2%;margin-top: 10px;" @click="addcard()">+添加银行卡</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check:false
			}
		},
		methods: {
			addcard(){
				this.check=true
			},
			firstadd(){
				this.check=false
				uni.navigateTo({
					url:'firstaddcard/firstaddcard'
				})
			},
			secondadd(){
				this.check=false
				uni.navigateTo({
					url:'secondaddcard/secondaddcard'
				})
			},
			deladd(){
				uni.navigateTo({
					url:'deladd/deladd'
				})
			}
		}
	}
</script>

<style scoped>
    .card{
		width: 96%;
		height: 150px;
		margin-left: 2%;
	}
	.cardbtn{
		width: 96%;
		height: 150px;
		margin-left: 2%;
		position: relative;
	}
	.cardbtn_db{
		width: 150px;
		height:55px;
		border-radius: 5px;
		border: 1px solid #ccc;
		position: absolute;
		top: 1px;
		right: 7px;
		z-index: 99;
		background-color: #fff;
	}
	.carddb_top{
		width: 100%;
		height: 25px;
	}
	.carddb_bottom{
		width: 100%;
		height: 25px;
	}
</style>
